<template>
  <div class='container'>
    <el-card class="box-card">
      <div class="text item">
        <el-row type="flex" justify="space-between">
          <span class="instructions">说明：目前支持学科和关键字条件筛选</span>
          <el-button type="success" icon="el-icon-edit" size="small" @click="jumpNew">新增试题</el-button>
        </el-row>
        <!-- 表单区 -->
        <div class="box">
          <el-form :model="form" ref="form" size="small" label-width="80px">
            <el-row>
              <el-col :span="6">
                <el-form-item label="学科" prop="subjectID">
                  <el-select v-model="form.subjectID" placeholder="请选择" @change="getSecondList">
                    <el-option
                    v-for="item in subjectName"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="二级目录" prop="twoLevelID">
                  <el-select v-model="form.twoLevelID" placeholder="请选择">
                   <el-option
                   v-for="item in twoLevelDirectory"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="标签" prop="tagsID">
                  <el-select v-model="form.tagsID" placeholder="请选择">
                    <el-option
                    v-for="item in tags"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="关键字" prop="theKeyword">
                  <el-input v-model="form.theKeyword" placeholder="根据题干搜索"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="试题类型" prop="textType">
                  <el-select v-model="form.textType" placeholder="请选择">
                    <el-option label="单选" value="1"></el-option>
                    <el-option label="多选" value="2"></el-option>
                    <el-option label="简答" value="3"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="难度" prop="dufficulty">
                  <el-select v-model="form.dufficulty" placeholder="请选择">
                    <el-option label="简单" value="1"></el-option>
                    <el-option label="一般" value="2"></el-option>
                    <el-option label="困难" value="3"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="方向" prop="directionID">
                  <el-select v-model="form.directionID" placeholder="请选择">
                    <el-option
                    :label="item"
                    :value="idx"
                    v-for="(item,idx) in directions" :key="idx"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="录入人" prop="entryUserID">
                  <el-select v-model="form.entryUserID" placeholder="请选择">
                    <el-option
                    v-for="item in entryUser"
                    :key="item.id"
                    :label="item.username"
                    :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="题目备注" prop="titleNotes">
                  <el-input v-model="form.titleNotes" placeholder=""></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="企业简称" prop="enterprise">
                  <el-input v-model="form.enterprise" placeholder=""></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="城市">
                  <el-row :gutter="14">
                    <el-col :span="11" class="ccity">
                      <el-form-item prop="provinceChecked">
                        <el-select v-model="form.provinceChecked" placeholder="请选择" @change="getCtiyData">
                          <el-option
                          v-for="(item, idx) in citySelect.provinceData"
                          :key="idx"
                          :label="item"
                          :value="item"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item prop="cityChecked">
                        <el-select v-model="form.cityChecked" placeholder="请选择">
                          <el-option
                          v-for="(item, idx) in citySelect.cityData"
                          :key="idx"
                          :label="item"
                          :value="item"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item class="mybtn">
                  <el-button @click="resetForm">清除</el-button>
                  <el-button type="primary" @click="doQuestions" v-loading="isLoading">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 列表区域 -->
        <div>
          <div class="datatotal">
            <template>
              <el-alert
                :title="listenTotal"
                type="info"
                show-icon
                :closable="false">
              </el-alert>
            </template>
          </div>
          <el-row>
            <el-col :span="24">
              <template>
                <el-table
                  v-loading="isLoading"
                  :data="questionList"
                  style="width: 100%">
                  <el-table-column
                    prop="number"
                    label="试题编号"
                    width="240">
                  </el-table-column>
                  <el-table-column
                    prop="subject"
                    label="学科"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="catalog"
                    label="目录"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    label="题型"
                    width="100">
                    <template slot-scope="scope">
                      <div v-for="item in questionTypes" :key="item.value">
                        <span v-if="Number(scope.row.questionType) === item.value">{{ item.label }}</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="题干">
                    <template slot-scope="scope">
                      <div v-html="scope.row.question"></div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="录入时间"
                    width="160">
                    <template slot-scope="scope">
                      <span>{{ scope.row.addDate }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="难度"
                    width="100">
                    <template slot-scope="scope">
                      <div v-for="item in difficultys" :key="item.value">
                        <span v-if="Number(scope.row.difficulty) === item.value">{{ item.label }}</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="creator"
                    label="录入人"
                    width="140">
                  </el-table-column>
                  <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                      <el-col>
                        <el-col :span="6">
                          <el-button type="primary" plain size="mini" icon="el-icon-view" circle
                            @click="preview(scope.row.id)"></el-button>
                        </el-col>
                        <el-col :span="6">
                          <el-button type="success" plain size="mini" icon="el-icon-edit" circle
                            @click="jumpNewid(scope.row.id)"></el-button>
                        </el-col>
                        <el-col :span="6">
                          <el-button type="danger" plain size="mini" icon="el-icon-delete" circle
                            @click="deleteSubject(scope.row.id)"></el-button>
                        </el-col>
                        <el-col :span="6">
                          <el-button type="warning" plain size="mini" icon="el-icon-check" circle
                            @click="addChoice(scope.row.id,1)"></el-button>
                        </el-col>
                      </el-col>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-col>
          </el-row>
          <!-- 分页 -->
          <div class="page">
            <el-pagination
              v-loading="isLoading"
              background
              layout="prev, pager, next, sizes, jumper"
              :page-sizes="[5,10,15,20]"
              :page-size="this.form.pagesize"
              :current-page.sync = "form.page"
              @size-change="sizeChange"
              @current-change="pageChange"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </el-card>
    <!-- 预览弹框 -->
    <el-dialog
      title="题目预览"
      :visible.sync="dialogVisible"
      width="60%"
      v-if="dialogVisible">
      <div><questions-preview :subID="subID" @close="dialogVisible=false"></questions-preview></div>
    </el-dialog>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import { simple as simpleSecond } from '@/api/hmmm/directorys'
import { simple as simpleLabel } from '@/api/hmmm/tags'
import { simple as simpleUser } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { list, remove, choiceAdd } from '@/api/hmmm/questions'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
import QuestionsPreview from '../components/questions-preview'
import { rTime } from '@/filters/index'
export default {
  name: 'questions',
  components: {
    QuestionsPreview
  },
  data () {
    return {
      citySelect: {
        provinceData: [], // 省列表数据
        cityData: [] // 城市区域列表数据
      },
      subjectName: [], // 学科下拉详情目录
      twoLevelDirectory: [], // 学科二级下拉目录
      tags: [], // 学科标签目录
      entryUser: [], // 录入人
      form: {
        page: 1,
        pagesize: 5,
        provinceChecked: null, // 当前选中的省
        cityChecked: null, // 当前选中的城区
        subjectID: null, // 当前选中的学科
        twoLevelID: null, // 当前选中的二级目录项
        tagsID: null, // 当前选中的学科标签
        theKeyword: null, // 当前的关键字
        textType: null, // 试题类型
        dufficulty: null, // 难度
        directionID: null, // 当前选中的方向
        entryUserID: null, // 当前选中录入人
        titleNotes: null, // 题目备注
        enterprise: null // 企业简称
      },
      questionList: [], // 基础题目的列表
      total: 0, // 总条数后台返回
      questionTypes: [], // 题型数据
      difficultys: [],
      dialogVisible: false, // 弹框显示
      subID: '', // 当前选中预览当前行的id
      isLoading: false,
      directions: [] // 方向的列表
    }
  },
  created () {
    // 初始数据渲染
    this.initialData()
    // 初始的基础题库列表
    this.getQuestions()
    this.questionTypes = questionType
    this.difficultys = difficulty
    this.directions = direction
  },
  methods: {
    initialData () {
      // 读取学科数据
      this.getSubjectList()
      // 读取录入人数据
      this.getEntryUser()
      // 读取省数据
      this.getProvince()
    },
    // 获取学科数据
    async getSubjectList () {
      try {
        const res = await simple()
        this.subjectName = res.data
      } catch (err) {
        console.log(err + '获取数据失败')
      }
    },
    // 获取录入人数据
    async getEntryUser () {
      try {
        const resUser = await simpleUser()
        this.entryUser = resUser.data
      } catch (err) {
        console.log(err + '获取录入人数据失败')
      }
    },
    // 获取省数据
    getProvince () {
      this.citySelect.provinceData = provinces()
    },
    // 城市省的下拉框发生变化获取城市数据
    getCtiyData () {
      this.citySelect.cityData = citys(this.form.provinceChecked)
      this.form.cityChecked = this.citySelect.cityData[0]
    },
    // 学科下拉框发生变化获取学科二级目录
    async getSecondList () {
      try {
        // 获取学科二级目录数据
        const res = await simpleSecond({ subjectID: this.form.subjectID })
        this.twoLevelDirectory = res.data
        // 获取标签数据
        const resLabel = await simpleLabel({ subjectID: this.form.subjectID })
        this.tags = resLabel.data
      } catch (err) {
        console.log(err + '获取学科二级目录失败')
      }
    },
    // 清空表单选择数据
    resetForm () {
      this.$refs.form.resetFields()
      this.twoLevelDirectory = []
      this.tags = []
    },
    // 获取基础题库列表
    async getQuestions () {
      try {
        this.isLoading = true
        const res = await list(this.form)
        res.data.items.forEach(element => {
          element.addDate = rTime(element.addDate)
        })
        this.total = res.data.counts
        this.questionList = res.data.items
        this.isLoading = false
      } catch (err) {
        console.log(err + '获取基础题库列表失败')
        this.isLoading = false
      }
    },
    doQuestions () {
      this.form.page = 1
      this.getQuestions()
    },
    pageChange (pageParams) {
      this.form.page = pageParams // 更新页码
      this.getQuestions()
    },
    sizeChange (pagesizeParams) {
      this.form.page = 1
      this.form.pagesize = pagesizeParams // 更新总条数
      this.getQuestions()
    },
    // 跳转到试题录入
    jumpNew () {
      this.$router.push('/questions/new')
    },
    // 点击编辑携带id跳转到试题录入
    jumpNewid (id) {
      this.$router.push('/questions/new?id=' + id)
    },
    // 删除当前学科发送请求
    async doDeleteSubject (id) {
      try {
        await remove({ id })
        this.getQuestions()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      } catch (err) {
        console.log(err + '请求删除失败')
      }
    },
    // 点击删除当前行学科
    deleteSubject (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.doDeleteSubject(id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 加入精选发送请求
    async doAddChoice (id, num) {
      try {
        await choiceAdd({ id, choiceState: num })
        this.getQuestions()
        this.$router.push('/questions/choice')
        this.$message({
          type: 'success',
          message: '加入精选成功!'
        })
      } catch (err) {
        console.log(err + '请求加入精选失败')
      }
    },
    // 点击加入精选
    addChoice (id, num) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        this.doAddChoice(id, num)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 点击弹出预览框
    preview (id) {
      this.dialogVisible = true
      this.subID = id
    }
  },
  // 监听总条数
  computed: {
    listenTotal () {
      return '数据一共' + this.total + '条'
    }
  }
}
</script>

<style scoped lang='css'>
.container {
  padding: 10px 10px 0 10px;
}

.instructions {
  color: pink;
  font-size: 12px;
}

.demo-form-inline {
  margin-top: 16px;
}

.el-form--inline .el-form-item {
  margin-right: 0;
}

.box {
  height: 150px;
  box-sizing: border-box;
  margin-top: 16px;
  overflow: hidden;
}

.el-select {
  display: block;
  /* margin-right: 5px; */
}

.el-col-11 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.ccity {
  margin-right: 10px;
}

.datatotal {
  margin-bottom: 14px;
}

.page {
  margin-top: 16px;
  text-align: right;
}

.el-pagination /deep/ .el-pagination__jump{
  margin-left: 0;
}

.container {
  margin-bottom: 12px;
}

.mybtn {
  text-align: right;
}

</style>
